; (function () {
    // 步骤3：创建echarts实例
    let myChart = echarts.init(document.querySelector('.box:nth-of-type(3)'))
    console.log(myChart);

    // 步骤4：定义配置（指定图表的配置项和数据）
    let option = {
        title: {
            text: 'Funnel'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}%'
        },
        toolbox: {
            feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
            }
        },
        legend: {
            data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
        },
        series: [
            {
                name: 'Expected',
                type: 'funnel',
                left: '10%',
                width: '80%',
                label: {
                    formatter: '{b}Expected'
                },
                labelLine: {
                    show: false
                },
                itemStyle: {
                    opacity: 0.7
                },
                emphasis: {
                    label: {
                        position: 'inside',
                        formatter: '{b}Expected: {c}%'
                    }
                },
                data: [
                    { value: 60, name: 'Visit' },
                    { value: 40, name: 'Inquiry' },
                    { value: 20, name: 'Order' },
                    { value: 80, name: 'Click' },
                    { value: 100, name: 'Show' }
                ]
            },
            {
                name: 'Actual',
                type: 'funnel',
                left: '10%',
                width: '80%',
                maxSize: '80%',
                label: {
                    position: 'inside',
                    formatter: '{c}%',
                    color: '#fff'
                },
                itemStyle: {
                    opacity: 0.5,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                emphasis: {
                    label: {
                        position: 'inside',
                        formatter: '{b}Actual: {c}%'
                    }
                },
                data: [
                    { value: 30, name: 'Visit' },
                    { value: 10, name: 'Inquiry' },
                    { value: 5, name: 'Order' },
                    { value: 50, name: 'Click' },
                    { value: 80, name: 'Show' }
                ],
                // Ensure outer shape will not be over inner shape when hover.
                z: 100
            }
        ]
    };
    // 步骤5：使用刚指定的配置项和数据显示图表
    myChart.setOption(option)
    window.addEventListener = ('resize', () => {
        myChart.resize()
    })
})()